<template>
  <div class="interview-search-container">
    <!-- 顶部 -->
    <div class="top-box">
      <MMNavBar title="面试技巧搜索"></MMNavBar>
      <!-- search组件 -->
      <van-search
        shape="round"
        v-model="value"
        placeholder="请输入搜索关键词"
        show-action
        @search="onSearch"
        @cancel="onCancel"
      >
        <!-- 自定义左侧图标 -->
        <template #left-icon>
          <i class="iconfont iconicon_search"></i>
        </template>
      </van-search>
    </div>
    <!-- 搜索选项 -->
    <div v-if="shareList.length === 0" class="option-box">
      <!-- 热搜区域 -->
      <div class="section">
        <div class="title">大家都在搜索</div>
        <ul class="tags">
          <li
            class="tag"
            v-for="(item, index) in topSearch"
            @click="clickAndSearch(item)"
            :key="index"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <!-- 历史记录区域 -->
      <div class="section">
        <div class="title">
          历史记录 <span @click="clearHistory">清空</span>
        </div>
        <div class="tags">
          <!-- 双击 -->
          <span
            class="tag"
            v-for="(item, index) in history"
            :key="index"
            @dblclick="removeItem(index)"
            @click="clickAndSearch(item)"
            >{{ item }}</span
          >
        </div>
      </div>
    </div>
    <!-- 搜索列表 -->
    <div class="result-box" v-else>
      <MMShareItem
        v-for="item in shareList"
        :key="item.id"
        :item="item"
      ></MMShareItem>
    </div>
  </div>
</template>

<script>
// 导入api
import { shareTopSearch, shareList } from '../../api/find'
// 导入工具函数
import {
  getHistory,
  saveHistory,
  removeHistory
} from '../../utils/shareHistory'
export default {
  data () {
    return {
      value: '',
      // 热搜关键词
      topSearch: [],
      // 自己的历史记录
      // 缓存的读取不需要放在生命周期钩子中
      history: getHistory(),
      // 搜索结果
      shareList: []
    }
  },
  // 获取热搜数据
  created () {
    // 接口数据获取
    shareTopSearch().then(res => {
      console.log(res)
      this.topSearch = res.data
    })
  },
  methods: {
    // 点击取消
    onCancel () {
      // 额外的清除搜索结果
      this.shareList = []
    },
    // 点击搜索指定内容
    clickAndSearch (item) {
      // 输入框切换显示的文本
      this.value = item
      // 触发search方法
      this.onSearch()
    },
    // 删除指定的历史记录
    removeItem (index) {
      console.log(index)
      this.history.splice(index, 1)
    },
    // 清空历史记录
    clearHistory () {
      // 删除缓存
      removeHistory()
      // 本地数组清空
      this.history = []
    },
    // 搜索内容
    onSearch () {
      // -----------set实现去重
      this.history.push(this.value)
      // 通过set去重
      // const set = new Set(this.history)
      // 赋值给history
      // this.history=[...set]
      // 上面两行简写为1行
      this.history = [...new Set(this.history)]
      // 如果超出了长度 删除
      if (this.history.length > 5) {
        // 删除第一个
        this.history.shift()
      }
      // 保存到缓存中
      saveHistory(this.history)

      // 通过接口获取数据
      shareList({ q: this.value }).then(res => {
        // console.log(res)
        res.data.list.forEach(v => {
          // 改头像
          if (v.author.avatar) {
            v.author.avatar = process.env.VUE_APP_URL + v.author.avatar
          }
          // 替换标题的文本
          v.title = v.title.replace(this.value, `<span>${this.value}</span>`)
        })
        // 本地保存
        this.shareList = res.data.list
      })

      // ----------基本数组方法实现去重
      // 重复判断
      // const index = this.history.indexOf(this.value)
      // if (index !== -1) {
      //   // 存在
      //   this.history.splice(index, 1)
      // }
      // // 获取输入值
      // this.history.push(this.value)
      // // 添加
      // // 判断长度
      // if (this.history.length > 5) {
      //   this.history.shift()
      // }
    }
  }
}
</script>

<style lang="less">
.interview-search-container {
  // 最小一个屏幕高
  min-height: 100vh;
  background: @white-color;
  .top-box {
    padding-bottom: 11px;
    background: @white-color;
    position: relative;
    &:after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      top: -50%;
      right: -50%;
      bottom: -50%;
      left: -50%;
      border: 0 solid #ebedf0;
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      border-bottom-width: 0.02667rem;
    }
    .van-hairline--bottom::after {
      border-bottom-width: 0;
    }
    .van-search__content {
      background: #f7f4f5;
      font-size: 14px;
      color: #b3b3b3;
      .iconfont {
        font-size: 19px;
        color: #b3b3b3;
      }
    }
  }
  // 搜索选项
  .option-box {
    padding: 15px;

    .section {
      margin-bottom: 27px;
      .title {
        font-size: 18px;
        font-weight: 500;
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
          font-size: 12px;
          color: #545671;
        }
      }
      .tags {
        margin-top: 18px;
        display: flex;
        .tag {
          margin-right: 10px;
          margin-bottom: 11px;
          padding: 6px;
          border-radius: 4px;
          font-size: 12px;
          color: @subdominant-font-color;
          background-color: #eceaea;
        }
      }
    }
  }
  .result-box {
    padding: 15px;
  }
}
</style>
